<template>
  <div class="home">
    <!-- 顶部横幅 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1>找到您理想的住所</h1>
        <p>探索优质房源，开启美好生活</p>
      </div>
    </div>

    <div class="home-main">
      <!-- 搜索区域 -->
      <div class="search-section">
        <div class="search-form">
          <el-input
            v-model="searchQuery"
            placeholder="搜索房源（支持地区、小区名）"
            class="search-input"
            clearable
            @clear="handleSearch"
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="handleSearch" class="search-btn" round>
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
        </div>
        
        <!-- 智能搜索选项卡 -->
        <div class="smart-search-tabs">
          <el-tabs v-model="activeSearchTab" @tab-change="handleTabChange">
            <el-tab-pane label="全部房源" name="all"></el-tab-pane>
            <el-tab-pane label="按地区搜索" name="region"></el-tab-pane>
            <el-tab-pane label="按户型搜索" name="type"></el-tab-pane>
          </el-tabs>
        </div>
        
        <!-- 地区搜索 -->
        <div v-if="activeSearchTab === 'region'" class="region-search">
          <h4>按地区搜索</h4>
          
          <!-- 省市级联选择器 -->
          <div class="province-city-selector">
            <el-cascader
              v-model="selectedProvinceCity"
              :options="regionOptions"
              placeholder="请选择省市"
              :props="{ value: 'value', label: 'label', children: 'children' }"
              clearable
              style="width: 300px; margin-right: 12px;"
              @change="handleProvinceCityChange"
              :disabled="regionLoading"
            />
            <el-button type="primary" @click="handleProvinceCitySearch" :disabled="!selectedProvinceCity">
              按省市搜索
            </el-button>
          </div>
          
          <!-- 详细地区搜索 -->
          <div class="detail-region-search">
            <h5>或按详细地区搜索</h5>
            <div class="custom-region">
              <el-input 
                v-model="customRegion" 
                placeholder="输入详细地区名称（如：朝阳区、中关村、国贸等）"
                @keyup.enter="handleDetailRegionSearch"
                style="width: 300px; margin-right: 12px;"
              />
              <el-button type="primary" @click="handleDetailRegionSearch" :disabled="!customRegion">
                详细搜索
              </el-button>
            </div>
          </div>
          
          <!-- 快速选择热门城市 -->
          <div class="hot-cities">
            <h5>热门城市</h5>
            <div class="city-options">
              <el-button 
                v-for="city in hotCities" 
                :key="city.id"
                :type="selectedHotCity === city.id ? 'primary' : 'default'"
                size="small" 
                @click="handleHotCitySearch(city)"
                round
              >
                {{ city.name }}
              </el-button>
            </div>
          </div>
          
          <!-- 当前搜索状态 -->
          <div v-if="currentSearchInfo" class="search-status">
            <el-tag type="info" closable @close="clearSearch">
              当前搜索：{{ currentSearchInfo }}
            </el-tag>
          </div>
        </div>
        
        <!-- 户型搜索 -->
        <div v-if="activeSearchTab === 'type'" class="type-search">
          <h4>按户型搜索</h4>
          <div class="type-options">
            <el-button 
              v-for="type in houseTypes" 
              :key="type.value"
              :type="selectedType === type.value ? 'primary' : 'default'"
              size="small" 
              @click="handleTypeSearch(type.value)"
              round
            >
              {{ type.label }}
            </el-button>
          </div>
        </div>
      </div>

      <!-- 筛选区域 -->
      <div class="filter-section">
        <div class="filter-title">
          <el-icon><Filter /></el-icon>
          <span>筛选条件</span>
        </div>
        <div class="filter-options">
          <el-select v-model="priceRange" placeholder="价格区间" clearable @change="handleSearch">
            <el-option label="0-2000元" value="0-2000" />
            <el-option label="2000-4000元" value="2000-4000" />
            <el-option label="4000-6000元" value="4000-6000" />
            <el-option label="6000元以上" value="6000+" />
          </el-select>
          <el-select v-model="houseType" placeholder="户型" clearable @change="handleSearch">
            <el-option label="一室一厅" value="1" />
            <el-option label="两室一厅" value="2" />
            <el-option label="三室一厅" value="3" />
            <el-option label="三室两厅" value="3-2" />
            <el-option label="四室两厅" value="4-2" />
          </el-select>
        </div>
      </div>

      <!-- 房源列表 -->
      <div class="house-list">
        <div class="list-header">
          <h3>精选房源</h3>
          <div class="list-sort">
            <span 
              v-for="(item, index) in sortOptions" 
              :key="index"
              :class="['sort-item', { active: currentSort === item.value }]"
              @click="handleSort(item.value)"
            >
              {{ item.label }}
            </span>
          </div>
        </div>
        <el-row :gutter="24">
          <el-col :xs="24" :sm="12" :md="8" v-for="house in sortedHouses" :key="house.id">
            <el-card class="house-card" shadow="hover">
              <div class="house-image-wrapper">
                <img 
                  :src="house.images && house.images.length > 0 ? house.images[0] : '/default-house.jpg'" 
                  class="house-image"
                  @error="handleImageError"
                />
                <div class="house-tags">
                  <span class="tag new" v-if="house.isNew">新上架</span>
                  <span class="tag hot" v-if="house.isHot">热门</span>
                </div>
                <div class="house-overlay">
                  <el-button type="primary" size="small" round @click="viewHouseDetail(house.id)">查看详情</el-button>
                </div>
              </div>
              <div class="house-info">
                <h3>{{ house.title }}</h3>
                <p class="house-price">¥{{ house.price }}/月</p>
                <p class="house-details">
                  <span class="detail-item">
                    <el-icon><House /></el-icon>
                    {{ house.area }}㎡
                  </span>
                  <span class="detail-item">
                    <el-icon><HomeFilled /></el-icon>
                    {{ house.type }}
                  </span>
                </p>
                <p class="house-address">
                  <el-icon><Location /></el-icon>
                  {{ house.address }}
                </p>
                <div class="house-footer">
                  <span class="view-count">
                    <el-icon><View /></el-icon>
                    {{ Math.floor(Math.random() * 1000) }}
                  </span>
                  <span class="publish-time">
                    <el-icon><Clock /></el-icon>
                    {{ formatDate(house.created_at) }}
                  </span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search, Filter, View, House, HomeFilled, Location, Clock } from '@element-plus/icons-vue'
import { houseApi } from '../api'

const router = useRouter()
const houses = ref([])
const searchQuery = ref('')
const priceRange = ref('')
const houseType = ref('')
const isLoggedIn = ref(!!localStorage.getItem('token'))
const currentSort = ref('default')
const activeSearchTab = ref('all')
const selectedProvinceCity = ref([])
const customRegion = ref('')
const selectedType = ref('')
const regionLoading = ref(false)
const regionOptions = ref([])
const currentSearchInfo = ref('')
const selectedHotCity = ref('')

const sortOptions = [
  { label: '默认排序', value: 'default' },
  { label: '价格 ↑', value: 'price-asc' },
  { label: '价格 ↓', value: 'price-desc' }
]

const houseTypes = [
  { label: '一室一厅', value: '1室1厅' },
  { label: '两室一厅', value: '2室1厅' },
  { label: '三室一厅', value: '3室1厅' },
  { label: '三室两厅', value: '3室2厅' },
  { label: '四室两厅', value: '4室2厅' }
]

const hotCities = ref([])

// 获取省市级联数据
const fetchRegionData = async () => {
  try {
    regionLoading.value = true
    const response = await fetch('/api/regions/cascader', {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    
    if (!response.ok) {
      throw new Error('获取省市数据失败')
    }
    
    const data = await response.json()
    regionOptions.value = data.regions
  } catch (error) {
    console.error('获取省市数据失败:', error)
    ElMessage.error('获取省市数据失败')
  } finally {
    regionLoading.value = false
  }
}

// 获取热门城市数据
const fetchHotCities = async () => {
  try {
    const response = await fetch('/api/regions/hot-cities', {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    
    if (!response.ok) {
      throw new Error('获取热门城市失败')
    }
    
    const data = await response.json()
    hotCities.value = data.hot_cities
  } catch (error) {
    console.error('获取热门城市失败:', error)
  }
}

// 处理排序
const handleSort = (value) => {
  currentSort.value = value
}

// 排序后的房源列表
const sortedHouses = computed(() => {
  let result = [...houses.value]
  switch (currentSort.value) {
    case 'price-asc':
      result.sort((a, b) => a.price - b.price)
      break
    case 'price-desc':
      result.sort((a, b) => b.price - a.price)
      break
    default:
      result.sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
  }
  return result
})

// 格式化日期
const formatDate = (date) => {
  const d = new Date(date)
  const now = new Date()
  const diff = now - d
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days}天前`
  return d.toLocaleDateString()
}

// 处理图片加载错误
const handleImageError = (e) => {
  e.target.src = '/default-house.jpg'
}

// 查看房源详情
const viewHouseDetail = (houseId) => {
  router.push(`/house/${houseId}`)
}

// 获取房源列表
const fetchHouses = async () => {
  if (!isLoggedIn.value) {
    return
  }
  
  try {
    let data
    
    // 检查是否有任何筛选条件
    const hasFilters = priceRange.value || houseType.value || searchQuery.value
    
    // 根据搜索类型调用不同的API
    if (activeSearchTab.value === 'region' && selectedProvinceCity.value.length > 0) {
      // 按地区搜索
      const response = await houseApi.searchByRegion(selectedProvinceCity.value.map(item => item.label).join(','))
      data = response.houses
      ElMessage.success(`找到 ${response.total_count} 套房源 - ${selectedProvinceCity.value.map(item => item.label).join(',')}`)
    } else if (activeSearchTab.value === 'type' && selectedType.value) {
      // 按户型搜索
      const response = await houseApi.searchByType(selectedType.value)
      data = response.houses
      ElMessage.success(`找到 ${response.total_count} 套房源 - ${selectedType.value}`)
    } else if (hasFilters) {
      // 有筛选条件时使用综合搜索
      const searchParams = {}
      
      // 添加搜索关键词
      if (searchQuery.value) {
        searchParams.region = searchQuery.value
      }
      
      // 添加价格筛选
      if (priceRange.value) {
        const [min, max] = priceRange.value.split('-')
        if (min !== undefined) searchParams.min_price = parseInt(min)
        if (max && max !== '+') searchParams.max_price = parseInt(max)
      }
      
      // 添加户型筛选
      if (houseType.value) {
        // 将前端选项值转换为后端期望的格式
        // 数据库中存储的是简单数字格式，如 "1", "2", "3" 等
        searchParams.type = houseType.value
        console.log('🏠 户型筛选参数:', houseType.value)
      }
      
      console.log('🔍 发送搜索参数:', searchParams)
      
      const response = await houseApi.searchHouses(searchParams)
      data = response.houses
      ElMessage.success(`找到 ${response.total_count} 套房源`)
    } else {
      // 没有任何筛选条件时获取所有房源
      data = await houseApi.getHouses()
    }
    
    houses.value = data.map(house => ({
      ...house,
      isNew: new Date(house.created_at) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
      isHot: Math.random() > 0.7
    }))
  } catch (error) {
    if (error.response && error.response.status === 401) {
      houses.value = []
    } else {
      console.error('获取房源列表失败:', error)
      ElMessage.error('获取房源列表失败')
    }
  }
}

// 处理搜索
const handleSearch = () => {
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录')
    return
  }
  fetchHouses()
}

// 处理智能搜索选项卡切换
const handleTabChange = () => {
  if (activeSearchTab.value === 'region') {
    selectedProvinceCity.value = []
    customRegion.value = ''
    selectedHotCity.value = ''
    currentSearchInfo.value = ''
  } else if (activeSearchTab.value === 'type') {
    selectedType.value = ''
  }
  fetchHouses()
}

// 处理省市级联选择
const handleProvinceCityChange = (value) => {
  console.log('省市级联选择变化:', value)
  selectedHotCity.value = ''
  if (!value || value.length === 0) {
    currentSearchInfo.value = ''
  }
}

// 处理按省市搜索
const handleProvinceCitySearch = async () => {
  if (!selectedProvinceCity.value || selectedProvinceCity.value.length === 0) {
    ElMessage.warning('请先选择省市')
    return
  }
  
  try {
    const [provinceId, cityId] = selectedProvinceCity.value
    const params = new URLSearchParams()
    
    if (provinceId) {
      params.append('province_id', provinceId)
    }
    if (cityId) {
      params.append('city_id', cityId)
    }
    
    const response = await fetch(`/api/houses/search/region?${params}`, {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    
    if (!response.ok) {
      throw new Error('搜索失败')
    }
    
    const data = await response.json()
    houses.value = data.houses.map(house => ({
      ...house,
      isNew: new Date(house.created_at) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
      isHot: Math.random() > 0.7
    }))
    
    currentSearchInfo.value = data.search_info
    customRegion.value = ''
    selectedHotCity.value = ''
    
    ElMessage.success(`找到 ${data.total_count} 套房源 - ${data.search_info}`)
  } catch (error) {
    console.error('省市搜索失败:', error)
    ElMessage.error('省市搜索失败')
  }
}

// 处理详细地区搜索
const handleDetailRegionSearch = async () => {
  if (!customRegion.value.trim()) {
    ElMessage.warning('请输入详细地区名称')
    return
  }
  
  try {
    const params = new URLSearchParams({
      region: customRegion.value.trim()
    })
    
    const response = await fetch(`/api/houses/search/region?${params}`, {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    
    if (!response.ok) {
      throw new Error('搜索失败')
    }
    
    const data = await response.json()
    houses.value = data.houses.map(house => ({
      ...house,
      isNew: new Date(house.created_at) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
      isHot: Math.random() > 0.7
    }))
    
    currentSearchInfo.value = data.search_info
    selectedProvinceCity.value = []
    selectedHotCity.value = ''
    
    ElMessage.success(`找到 ${data.total_count} 套房源 - ${data.search_info}`)
  } catch (error) {
    console.error('详细地区搜索失败:', error)
    ElMessage.error('详细地区搜索失败')
  }
}

// 处理热门城市搜索
const handleHotCitySearch = async (city) => {
  try {
    selectedHotCity.value = city.id
    
    const params = new URLSearchParams({
      city_id: city.id
    })
    
    const response = await fetch(`/api/houses/search/region?${params}`, {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    
    if (!response.ok) {
      throw new Error('搜索失败')
    }
    
    const data = await response.json()
    houses.value = data.houses.map(house => ({
      ...house,
      isNew: new Date(house.created_at) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
      isHot: Math.random() > 0.7
    }))
    
    currentSearchInfo.value = `热门城市: ${city.name}`
    selectedProvinceCity.value = []
    customRegion.value = ''
    
    ElMessage.success(`找到 ${data.total_count} 套房源 - ${city.name}`)
  } catch (error) {
    console.error('热门城市搜索失败:', error)
    ElMessage.error('热门城市搜索失败')
  }
}

// 处理户型搜索
const handleTypeSearch = (type) => {
  selectedType.value = type
  fetchHouses()
}

// 清除搜索状态
const clearSearch = () => {
  currentSearchInfo.value = ''
  selectedProvinceCity.value = []
  customRegion.value = ''
  selectedHotCity.value = ''
  fetchHouses()
}

onMounted(async () => {
  isLoggedIn.value = !!localStorage.getItem('token')
  if (isLoggedIn.value) {
    // 并行加载数据
    await Promise.all([
      fetchRegionData(),
      fetchHotCities(),
      fetchHouses()
    ])
  }
})
</script>

<style scoped>
.home {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e3f0ff 100%);
}

.hero-section {
  height: 400px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
              url('/hero-bg.jpg') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  margin-bottom: 40px;
}

.hero-content {
  max-width: 800px;
  padding: 0 20px;
}

.hero-content h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
  animation: fadeInDown 1s;
}

.hero-content p {
  font-size: 20px;
  opacity: 0.9;
  animation: fadeInUp 1s;
}

.home-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.search-section {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  margin-bottom: 24px;
  transform: translateY(-50px);
}

.search-form {
  display: flex;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.search-input {
  flex: 1;
}

.search-input :deep(.el-input__wrapper) {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-radius: 8px;
  transition: all 0.3s ease;
  padding: 8px 16px;
}

.search-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.search-btn {
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(45deg, #409EFF, #36D1DC);
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-section {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  margin-bottom: 24px;
}

.filter-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: #303133;
  font-size: 18px;
  font-weight: 500;
}

.filter-options {
  display: flex;
  gap: 16px;
}

.filter-section :deep(.el-select) {
  width: 180px;
}

.filter-section :deep(.el-select .el-input__wrapper) {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.filter-section :deep(.el-select .el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.house-list {
  margin-top: 24px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.list-header h3 {
  font-size: 24px;
  color: #303133;
  margin: 0;
  font-weight: 600;
}

.list-sort {
  display: flex;
  gap: 16px;
}

.sort-item {
  color: #606266;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 4px 12px;
  border-radius: 4px;
}

.sort-item:hover {
  color: #409EFF;
  background: rgba(64, 158, 255, 0.1);
}

.sort-item.active {
  color: #409EFF;
  font-weight: 500;
  background: rgba(64, 158, 255, 0.1);
}

.house-card {
  margin-bottom: 24px;
  transition: all 0.3s ease;
  height: 100%;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.house-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.house-image-wrapper {
  position: relative;
  overflow: hidden;
}

.house-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.house-card:hover .house-image {
  transform: scale(1.05);
}

.house-tags {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 8px;
}

.tag {
  padding: 4px 12px;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.tag.new {
  background: rgba(103, 194, 58, 0.9);
}

.tag.hot {
  background: rgba(245, 108, 108, 0.9);
}

.house-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.house-card:hover .house-overlay {
  opacity: 1;
}

.house-info {
  padding: 24px;
}

.house-info h3 {
  font-size: 18px;
  color: #303133;
  margin: 0 0 16px 0;
  font-weight: 600;
  line-height: 1.4;
}

.house-price {
  color: #f56c6c;
  font-size: 24px;
  font-weight: bold;
  margin: 16px 0;
  display: flex;
  align-items: center;
}

.house-price::before {
  content: '¥';
  font-size: 16px;
  margin-right: 2px;
}

.house-details {
  display: flex;
  gap: 16px;
  margin: 16px 0;
}

.detail-item {
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.house-address {
  color: #909399;
  font-size: 14px;
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.house-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.view-count, .publish-time {
  color: #909399;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 300px;
  }

  .hero-content h1 {
    font-size: 32px;
  }

  .hero-content p {
    font-size: 16px;
  }

  .search-section {
    transform: translateY(-30px);
    padding: 16px;
  }

  .search-form {
    flex-direction: column;
  }

  .search-input {
    width: 100%;
  }

  .filter-section {
    padding: 16px;
  }

  .filter-options {
    flex-direction: column;
  }

  .filter-section :deep(.el-select) {
    width: 100%;
  }

  .list-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .list-sort {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .house-image {
    height: 200px;
  }

  .house-info {
    padding: 16px;
  }

  .house-price {
    font-size: 20px;
  }
}

.smart-search-tabs {
  margin-top: 20px;
}

.smart-search-tabs :deep(.el-tabs__nav-wrap) {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 4px;
}

.smart-search-tabs :deep(.el-tabs__item) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

.smart-search-tabs :deep(.el-tabs__item.is-active) {
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.region-search, .type-search {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.region-search h4, .type-search h4 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.region-options, .type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.region-options .el-button, .type-options .el-button {
  border-radius: 20px;
  transition: all 0.3s ease;
}

.region-options .el-button:hover, .type-options .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.custom-region {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.custom-region .el-input :deep(.el-input__wrapper) {
  border-radius: 20px;
}

.custom-region .el-button {
  border-radius: 20px;
}

/* 省市级联选择器样式 */
.province-city-selector {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.province-city-selector .el-cascader {
  min-width: 300px;
}

/* 详细地区搜索样式 */
.detail-region-search {
  margin: 20px 0;
  padding: 16px;
  background: #f0f2f5;
  border-radius: 8px;
  border-left: 4px solid #409EFF;
}

.detail-region-search h5 {
  margin: 0 0 12px 0;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

/* 热门城市样式 */
.hot-cities {
  margin: 20px 0;
  padding: 16px;
  background: linear-gradient(135deg, #f8f9fa, #e3f0ff);
  border-radius: 12px;
}

.hot-cities h5 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hot-cities h5::before {
  content: '🔥';
  font-size: 16px;
}

.city-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.city-options .el-button {
  border-radius: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.city-options .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
}

.city-options .el-button--primary {
  background: linear-gradient(45deg, #409EFF, #36D1DC);
  border: none;
}

/* 搜索状态样式 */
.search-status {
  margin-top: 16px;
  padding: 12px;
  background: rgba(64, 158, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(64, 158, 255, 0.2);
}

.search-status .el-tag {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 16px;
}

/* 级联选择器加载状态 */
.province-city-selector .el-cascader.is-disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 响应式设计优化 */
@media (max-width: 768px) {
  .province-city-selector {
    flex-direction: column;
    align-items: stretch;
  }
  
  .province-city-selector .el-cascader {
    width: 100%;
    min-width: auto;
    margin-bottom: 12px;
  }
  
  .detail-region-search .custom-region {
    flex-direction: column;
    align-items: stretch;
  }
  
  .detail-region-search .custom-region .el-input {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 12px;
  }
  
  .city-options {
    justify-content: center;
  }
}
</style> 